import 'package:flutter/material.dart';
import 'package:flutter_app/constant/const_string.dart';
import 'package:flutter_app/pages/white_board/background_layer_widget.dart';
import 'package:flutter_app/pages/white_board/gesture_layer_widget.dart';
import 'package:flutter_app/pages/white_board/graphics_layer_widget.dart';
import 'package:flutter_app/pages/white_board/model/graphics_model.dart';
import 'package:flutter_app/pages/white_board/shape_type.dart';
import 'package:flutter_app/pages/white_board/white_board_vm.dart';
import 'package:flutter_app/utils/paint_util.dart';
import 'package:get/get.dart';

class WhiteBoardPage extends StatefulWidget {
  const WhiteBoardPage({super.key});

  @override
  State<WhiteBoardPage> createState() => _WhiteBoardPageState();
}

class _WhiteBoardPageState extends State<WhiteBoardPage> {
  ShapeType currentShape = ShapeType.none;

  final _whiteBoardVM = Get.put(WhiteBoardVM());

  @override
  void initState() {
    _whiteBoardVM.curCanvasOffset = const Offset(20, 20);
    _whiteBoardVM.curCanvasScale = 1.0;
    _whiteBoardVM.graphicsList = [];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('White Board'),
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.4),
        ),
        child: Stack(
          children: [
            const BackgroundLayerWidget(),
            GestureLayerWiget(),
            GraphicsLayerWidget(currentShape),
            Positioned(
              bottom: 100,
              right: 20,
              left: 20,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: const Icon(Icons.zoom_in)),
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: const Icon(Icons.zoom_out)),
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: const Icon(Icons.zoom_out_map)),
                  IconButton(
                      onPressed: () {
                        setState(() {
                          currentShape = ShapeType.line;
                        });
                      },
                      icon: const Icon(Icons.line_style)),
                  IconButton(
                      onPressed: () {
                        GraphicsModel graphicsModel = GraphicsModel();
                        graphicsModel.shapeType = ShapeType.path;
                        graphicsModel.points = [
                          const Offset(30, 30),
                          const Offset(100, 200),
                          const Offset(150, 150),
                        ];
                        graphicsModel.color = Colors.blue;
                        graphicsModel.width = 5.0;
                        _whiteBoardVM.graphicsList.add(graphicsModel);
                        _whiteBoardVM.updateWhiteBoard(
                            ConstString.graphicsLayerWidgetId);
                      },
                      icon: const Icon(Icons.rectangle)),
                  IconButton(
                      onPressed: () {
                        GraphicsModel graphicsModel = GraphicsModel();
                        graphicsModel.shapeType = ShapeType.path;
                        graphicsModel.points = [
                          const Offset(100, 100),
                          const Offset(150, 230),
                          const Offset(200, 200),
                          const Offset(290, 100),
                        ];
                        graphicsModel.color = Colors.red;
                        graphicsModel.width = 5.0;
                        _whiteBoardVM.graphicsList.add(graphicsModel);
                        _whiteBoardVM.updateWhiteBoard(
                            ConstString.graphicsLayerWidgetId);
                      },
                      icon: const Icon(Icons.polyline)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
